<template>
  <div id="user">
    <div class="operation">
      <div class="buttons">
        <el-button type="primary" @click="ClickAdd">新增</el-button>
        <el-button type="primary">导入</el-button>
        <el-button type="primary">配置</el-button>
      </div>
      <div class="inputs">
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="auditValue" @click="CheckBoxone" />待审核
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="onlineValue" @click="CheckBoxtwo" />在线
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="outlineValue" @click="CheckBoxthree" />离线
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="stopValue" @click="CheckBoxfive" />停用
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="deleteValue" @click="CheckBoxfour" />已删除
        </div>
        <div class="check" style="margin-right:10px;">
          <!-- <input type="text" placeholder="请输入搜索关键字" v-model="input_one" />
          <i class="iconfont icon-sousuo" @click="sendinput"></i> -->
          <el-input v-model="input_one" placeholder="请输入搜索关键字" maxlength="15" style="width:330px;"></el-input>
          <i class="iconfont icon-sousuo" @click="sendinput"></i>
        </div>
        <div>
          <i class="iconfont icon-shuaxin" style="margin-right:0px;" @click="Toreload"></i>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{background:'#F5F5F5'}"
      style="padding-left:20px;padding-right:20px;margin-top:20px;"
      show-overflow-tooltip
    >
    <el-table-column
        v-for="(item,index) in tableTitle"
        :key="index"
        :prop="item.tableprop"
        :label="item.name"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.UState =='在线'"
            @click="handleClickone(scope.row)"
            type="text"
            size="small"
          >查看</el-button>
          <el-button
            v-if="scope.row.UState =='在线'"
            @click="handleClicktwo(scope.row)"
            type="text"
            size="small"
          >强制下线</el-button>
          <el-button
            v-if="scope.row.UState =='离线'"
            @click="handleClickthree(scope.row)"
            type="text"
            size="small"
          >停用</el-button>
          <el-button
            v-if="scope.row.UState =='停用'"
            @click="handleClickfour(scope.row)"
            type="text"
            size="small"
          >启用</el-button>
          <el-button
            v-if="scope.row.UState =='离线' || scope.row.UState =='停用'"
            @click="handleClickfive(scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            v-if="scope.row.UState =='离线' || scope.row.UState =='停用'"
            @click="handleClicksix(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
          <el-button
            v-if="scope.row.UState =='离线'"
            @click="handleClickseven(scope.row)"
            type="text"
            size="small"
          >授权</el-button>
          <el-button
            v-if="scope.row.UState =='已删除'"
            @click="handleClickeight(scope.row)"
            type="text"
            size="small"
          >恢复</el-button>
          <el-button
            v-if="scope.row.UState =='待审核'"
            @click="handleClicknine(scope.row)"
            type="text"
            size="small"
          >审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pages">
      <el-pagination
        :hide-on-single-page="true"
        :page-size="pagesize"
        :pager-count="9"
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <!-- 新增用户弹出框 -->
    <el-dialog title="新增用户" center :visible.sync="dialogOne" width="30%">
      <el-form label-width="80px" :model="form_one">
        <el-form-item label="登录账号:">
          <el-input v-model="form_one.UName" placeholder="请输入登录账号(用户名)"></el-input>
        </el-form-item>
        <el-form-item label="登录密码:">
          <el-input v-model="form_one.PassWord" placeholder="使用默认初始密码或输入登录密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="所属组:">
          <el-select placeholder="请选择组:" v-model="groupvalue_one" style="width:100%;">
            <el-option
              v-for="item in groupdata"
              :key="item.GId"
              :label="item.GName"
              :value="item.GId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属角色:">
          <el-select
            placeholder="请选择角色:"
            v-model="rolevalue_one"
            style="width:100%;"
            multiple
            filterable
          >
            <el-option
              v-for="item in roledata"
              :key="item.RId"
              :label="item.RName"
              :value="item.RId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input type="textarea" v-model="form_one.Description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" @click="DeterOne">确定</el-button>
          <el-button style @click="CloseForm_one">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑用户弹出框 -->
    <el-dialog title="编辑用户" center :visible.sync="dialogTwo" width="30%">
      <el-form label-width="80px" :model="form_two">
        <el-form-item label="登录账号:">
          <el-input v-model="form_two.UName"></el-input>
        </el-form-item>
        <el-form-item label="登录密码:">
          <el-input v-model="form_two.PassWord" show-password></el-input>
        </el-form-item>
        <el-form-item label="数据来源:">
          <el-input v-model="form_two.ResouresType"></el-input>
        </el-form-item>
        <el-form-item label="所属组:">
          <el-select placeholder="请选择组:" v-model="groupvalue_two" style="width:100%;">
            <el-option
              v-for="item in groupdata"
              :key="item.GId"
              :label="item.GName"
              :value="item.GId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属角色:">
          <el-select
            placeholder="请选择角色:"
            v-model="rolevalue_two"
            style="width:100%;"
            multiple
            filterable
          >
            <el-option
              v-for="item in roledata"
              :key="item.RId"
              :label="item.RName"
              :value="item.RId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input type="textarea" v-model="form_two.Description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" @click="DeterTwo">确定</el-button>
          <el-button @click="CloseForm_two">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看用户弹出框 -->
    <el-dialog title="查看用户" center :visible.sync="dialogThree" width="30%">
      <el-form label-width="80px" :model="form_three">
        <el-form-item label="当前状态:">
          <el-input v-model="form_three.UState" disabled></el-input>
        </el-form-item>
        <el-form-item label="登录账号:">
          <el-input v-model="form_three.UName" disabled></el-input>
        </el-form-item>
        <el-form-item label="登录密码:">
          <el-input v-model="form_three.PassWord" show-password disabled></el-input>
        </el-form-item>
        <el-form-item label="数据来源:">
          <el-input v-model="form_three.ResouresType" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属组:">
          <el-input v-model="form_three.GName" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属角色:">
          <el-input v-model="form_three.RName" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input type="textarea" v-model="form_three.Description" disabled></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" @click="DeterThree">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      total: 0,
      currentPage: "1",
      pagesize: 10,
      tableData: [],
      tableTitle:[
        {name:"状态",tableprop:"UState"},
        {name:"用户名(登陆账号)",tableprop:"UName"},
        {name:"数据来源",tableprop:"ResouresType"},
        {name:"所属组",tableprop:"GName"},
        {name:"所属角色",tableprop:"RName"},
        {name:"描述",tableprop:"Description"},
      ],
      dialogOne: false,
      dialogTwo: false,
      dialogThree: false,
      form_one: {
        UName: "",
        PassWord: "",
        Description: ""
      },
      groupvalue_one: "",
      rolevalue_one: "",
      groupdata: [],
      roledata: [],
      form_two: {
        UName: "",
        PassWord: "",
        Description: "",
        ResouresType: "",
        UId: "",
        AppId: ""
      },
      groupvalue_two: "",
      rolevalue_two: "",
      form_three: {
        UState: "",
        UName: "",
        PassWord: "",
        ResouresType: "",
        GName: "",
        RName: "",
        Description: ""
      },
      auditValue: true, //待审核checkbox状态
      onlineValue: true, //在线checkbox状态
      outlineValue: true, //离线checkbox状态
      deleteValue: true, //删除checkbox状态
      stopValue: true, //停用checkbox状态
      input_one: ""
    };
  },
  components: {
  },
  methods: {
    sendinput() {
      let json = {
        MN: "QueryUser",
        DataContent: {
          KeyWord: this.input_one
        }
      };
      this.MIX_send(json);
      this.input_one = "";
    },
    CheckBoxone() {
      if (this.auditValue) {
        this.auditValue = false;
      } else {
        this.auditValue = true;
      }
    },
    CheckBoxtwo() {
      if (this.onlineValue) {
        this.onlineValue = false;
      } else {
        this.onlineValue = true;
      }
    },
    CheckBoxthree() {
      if (this.outlineValue) {
        this.outlineValue = false;
      } else {
        this.outlineValue = true;
      }
    },
    CheckBoxfour() {
      if (this.deleteValue) {
        this.deleteValue = false;
      } else {
        this.deleteValue = true;
      }
    },
    CheckBoxfive() {
      if (this.stopValue) {
        this.stopValue = false;
      } else {
        this.stopValue = true;
      }
    },
    handleClickone(r) {
      //点击查看
      this.dialogThree = true;
      this.form_three.UState = r.UState;
      this.form_three.UName = r.UName;
      this.form_three.PassWord = r.PassWord;
      this.form_three.ResouresType = r.ResouresType;
      this.form_three.GName = r.GName;
      this.form_three.RName = r.RName;
      this.form_three.Description = r.Description;
    },
    handleClicktwo(r) {
      //点击强制下线
      this.$confirm("是否将此用户强制下线?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdateUserState",
            DataContent: {
              UId: r.UId,
              UState: "3"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    handleClickthree(r) {
      //点击停用
      this.$confirm("是否停用此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdateUserState",
            DataContent: {
              UId: r.UId,
              UState: "5"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    handleClickfour(r) {
      //点击启用
      this.$confirm("是否启用此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdateUserState",
            DataContent: {
              UId: r.UId,
              UState: "3"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    handleClickfive(r) {
      this.groupdata.forEach((v, index) => {
        if (this.groupdata[index].GName == r.GName) {
          this.groupvalue_two = this.groupdata[index].GId;
        }
      });
      //点击编辑
      this.dialogTwo = true;
      this.form_two.UName = r.UName;
      this.form_two.PassWord = r.PassWord;
      this.form_two.ResouresType = r.ResouresType;
      this.rolevalue_two = r.RId.split(",");
      this.form_two.Description = r.Description;
      this.form_two.UId = r.UId;
      this.form_two.AppId = r.AppId;
    },
    handleClicksix(r) {
      //点击删除
      this.$confirm("是否删除此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "DelUser",
            DataContent: {
              UId: r.UId
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    handleClickseven() {
      //点击授权
      alert("授权");
    },
    handleClickeight(r) {
      //点击恢复
      this.$confirm("是否恢复此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdateUserState",
            DataContent: {
              UId: r.UId,
              UState: "1"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    handleClicknine(r) {
      //点击审核
      this.$confirm("审核是否通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdateUserState",
            DataContent: {
              UId: r.UId,
              UState: "3"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    current_change(currentPage) {
      //点击分页按钮
      this.currentPage = currentPage;
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      let json = {
        MN: "QueryUser",
        DataContent: {
          KeyWord: "",
          UState: AllUState,
          PageIndex: this.currentPage
        }
      };
      this.MIX_send(json);
    },
    ClickAdd() {
      this.dialogOne = true;
    },
    DeterOne() {
      if (
        this.form_one.UName &&
        this.form_one.PassWord &&
        this.groupvalue_one &&
        this.rolevalue_one
      ) {
        let rolevalue = this.rolevalue_one.join(",");
        let json = {
          MN: "AddUser",
          DataContent: {
            UName: this.form_one.UName,
            PassWord: this.form_one.PassWord,
            GId: this.groupvalue_one,
            RId: rolevalue,
            Description: this.form_one.Description,
            AppId: this.$config.config.WS_AppKey
          }
        };
        this.MIX_send(json);
        this.dialogOne = false;
      } else {
        this.$message({
          showClose: true,
          message: "请填写完整信息!!!"
        });
      }
    },
    CloseForm_one() {
      this.dialogOne = false;
      this.form_one.UName = "";
      this.form_one.PassWord = "";
      this.form_one.Description = "";
      this.groupvalue_one = "";
      this.rolevalue_one = "";
    },
    DeterTwo() {
      if (
        this.form_two.UName &&
        this.form_two.PassWord &&
        this.groupvalue_two &&
        this.rolevalue_two
      ) {
        let rolevalue = this.rolevalue_two.join(",");
        let json = {
          MN: "UpdateUser",
          DataContent: {
            UId: this.form_two.UId,
            UName: this.form_two.UName,
            PassWord: this.form_two.PassWord,
            GId: this.groupvalue_two,
            RId: rolevalue,
            Description: this.form_two.Description,
            ResouresType: this.form_two.ResouresType,
            AppId: this.form_two.AppId
          }
        };
        this.MIX_send(json);
        this.dialogTwo = false;
      } else {
        this.$message({
          showClose: true,
          message: "请填写完整基本信息!!!"
        });
      }
    },
    CloseForm_two() {
      this.dialogTwo = false;
    },
    DeterThree() {
      this.dialogThree = false;
    },
    Toreload() {
      this.$router.go(0);
    }
  },
  mounted() {
    let AllUState = this.Getvalue(
      this.auditValue,
      this.onlineValue,
      this.outlineValue,
      this.stopValue,
      this.deleteValue
    );
    this.GetAllValue(AllUState);
    let json_one = {
      MN: "QueryGroup",
      DataContent: {}
    };
    this.MIX_send(json_one);
    let json_two = {
      MN: "QueryRole",
      DataContent: {}
    };
    this.MIX_send(json_two);
  },
  watch: {
    //监听checkbox勾选的状态变化
    auditValue: function() {
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      this.GetAllValue(AllUState);
    },
    onlineValue: function() {
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      this.GetAllValue(AllUState);
    },
    outlineValue: function() {
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      this.GetAllValue(AllUState);
    },
    deleteValue: function() {
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      this.GetAllValue(AllUState);
    },
    stopValue: function() {
      let AllUState = this.Getvalue(
        this.auditValue,
        this.onlineValue,
        this.outlineValue,
        this.stopValue,
        this.deleteValue
      );
      this.GetAllValue(AllUState);
    },
    "$store.state.Permission.MNvalue.QueryUser": function(data) {
      if (data.Code == "0") {
        let arr = data.ReturnData;
        arr.forEach((value, index) => {
          arr[index].UState =
            arr[index].UState == "1"
              ? "待审核"
              : arr[index].UState == "2"
              ? "在线"
              : arr[index].UState == "3"
              ? "离线"
              : arr[index].UState == "4"
              ? "已删除"
              : arr[index].UState == "5"
              ? "停用"
              : "停用";
        });
        this.tableData = arr;
        this.total = data.TotalCount;
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.DelUser": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "删除成功"
        });
        let AllUState = this.Getvalue(
          this.auditValue,
          this.onlineValue,
          this.outlineValue,
          this.stopValue,
          this.deleteValue
        );
        let json = {
          MN: "QueryUser",
          DataContent: {
            KeyWord: "",
            UState: AllUState,
            PageIndex: this.currentPage
          }
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.AddUser": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "新增用户成功"
        });
        //清除对话框内容
        this.form_one.UName = "";
        this.form_one.PassWord = "";
        this.form_one.Description = "";
        this.groupvalue_one = "";
        this.rolevalue_one = "";
        //重新请求数据
        let AllUState = this.Getvalue(
          this.auditValue,
          this.onlineValue,
          this.outlineValue,
          this.stopValue,
          this.deleteValue
        );
        let json = {
          MN: "QueryUser",
          DataContent: {
            KeyWord: "",
            UState: AllUState,
            PageIndex: this.currentPage
          }
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.UpdateUser": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "编辑用户成功"
        });
        let AllUState = this.Getvalue(
          this.auditValue,
          this.onlineValue,
          this.outlineValue,
          this.stopValue,
          this.deleteValue
        );
        let json = {
          MN: "QueryUser",
          DataContent: {
            KeyWord: "",
            UState: AllUState,
            PageIndex: this.currentPage
          }
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.UpdateUserState": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "变更用户状态成功"
        });
        let AllUState = this.Getvalue(
          this.auditValue,
          this.onlineValue,
          this.outlineValue,
          this.stopValue,
          this.deleteValue
        );
        let json = {
          MN: "QueryUser",
          DataContent: {
            KeyWord: "",
            UState: AllUState,
            PageIndex: this.currentPage
          }
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryGroup": function(data) {
      if (data.Code == "0") {
        this.groupdata = data.ReturnData;
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryRole": function(data) {
      if (data.Code == "0") {
        this.roledata = data.ReturnData;
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    }
  },
  created() {
  }
};
</script>

<style scoped>
#user {
  position: relative;
}
.operation {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.buttons {
  width: 310px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.buttons > div {
  width: 90px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  background: #108cee;
}
.inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check {
  width: 330px;
  height: 38px !important;
  margin-left: 80px;
  position: relative;
}
.check > input {
  height: 38px;
  border: none;
  line-height: 40px;
  width: 310px;
  border: 1px solid gray;
}
.check > i {
  position: absolute;
  right: 20px;
}
.Pages {
  margin-top: 50px;
  position: absolute;
  right: 100px;
}
</style>
